<template>
    <view class="page">
        <wxTopStatus backgroundColor="#fff">
            <view class="navTitle"> 设置 </view>
        </wxTopStatus>

        <view>
            <!-- 个人信息 消息通知设置 语言设置 -->
            <view style="margin-top: 20rpx">
                <view
                    v-for="item in topList"
                    :key="item.text"
                    class="list-item flex-between py-[30rpx] px-[40rpx]"
                    @click="
                        () => {
                            if (item.login) {
                                if (!isLogin()) return
                            }
                            item.path && $jump(item.path)
                        }
                    "
                >
                    <view> {{ item.text }} </view>
                    <image mode="widthFix" :src="$getImg('/img/common/toRight.png')" />
                </view>
            </view>
            <!-- 用户协议 隐私协议 注销账号 -->
            <view style="margin-top: 20rpx">
                <view
                    v-for="item in bottomList"
                    :key="item.text"
                    class="list-item flex-between py-[30rpx] px-[40rpx]"
                    @click="() => (item.path && $jump(item.path)) || (item.click && item.click())"
                >
                    <view> {{ item.text }} </view>
                    <image :src="$getImg('/img/common/toRight.png')" mode="widthFix" />
                </view>
            </view>

            <view style="margin-top: 20rpx" class="logout flex-center" @click="logoutFn">
                {{ userStore.token ? '退出登录' : '登录' }}
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { useUserStore } from '@/stores/user'
import { jump } from '@/utils/util'
import { userDel } from '@/api/user'
import { useLogin } from '@/stores/login'

const userStore = useUserStore()
const useLoginStore = useLogin()
const topList = [
    {
        text: '个人信息',
        path: '/views/subViews/mine/setting/myInfo',
        login: true
    },
    {
        text: '消息通知设置',
        path: '/views/subViews/mine/setting/message'
    },
    // {
    //     text: '语言设置',
    //     path: ''
    // }
]

const bottomList = [
    {
        text: '用户协议',
        path: '/views/subViews/common/serviceProtocol?type=1'
    },
    {
        text: '隐私协议',
        path: '/views/subViews/common/serviceProtocol?type=2'
    },
    {
        text: '注销账号',
        async click() {
            if (!isLogin()) return
            const r = await uni.showModal({
                title: '提示',
                content: '确定注销账号吗？'
            })
            if (!r.confirm) return

            await userDel()

            uni.showToast({
                title: '注销账号成功',
                icon: 'none'
            })
            const t = setTimeout(() => {
                clearTimeout(t)
                jump('/views/home/index', null, 'switchTab')
            }, 1000)
        }
    }
]

// 判断是否登录
const isLogin = () => {
    if (userStore.token) return true
    useLoginStore.showLogin = true
}

// 退出登录
const logoutFn = async () => {
    if (!userStore.token) {
        useLoginStore.showLogin = true
        return
    }

    const r = await uni.showModal({
        title: '提示',
        content: '确定退出登录吗？'
    })
    if (!r.confirm) return

    userStore.logout()

    uni.showToast({
        title: '退出登录成功',
        icon: 'none'
    })
    const t = setTimeout(() => {
        clearTimeout(t)
        jump('/views/home/index', null, 'switchTab')
    }, 1000)
}
</script>

<style scoped lang="scss">
.page {
    height: 100vh;
    background-color: #f6f6f6;
    font-size: 14px;
}
.navTitle {
    font-weight: 700;
    font-size: 18px;
}

.list-item {
    border-bottom: 1px solid #e5e5e5;
    background-color: #fff;
    &:last-child {
        border-bottom: none;
    }

    image {
        width: 10rpx;
    }
}

.logout {
    color: #376af7;
    padding: 40rpx;
    background-color: #fff;
}
</style>
